<template>
  <div v-if="tableData">
    <el-row class="detailsRow">
      <el-col :span="12">
        <div class="details-row">
          <span>设备名称：</span>
          <span>{{ tableData.zcmc }}</span>
        </div>
        <div class="details-row rowRelative">
          <span>安装地址：</span>
          <span>{{ tableData.zcsfmc + tableData.zccsmc + tableData.zcqxmc + tableData.zcjdmc }}</span>
        </div>
        <div class="details-row">
          <span>设备IP：</span>
          <span>{{ tableData.ip }}</span>
        </div>
        <div class="details-row">
          <span>品牌：</span>
          <span> {{ tableData.ppmc }}</span>
        </div>
        <div class="details-row">
          <span>型号：</span>
          <span>{{ tableData.xh }}</span>
        </div>
        <div class="details-row">
          <span>工单状态：</span>
          <span :class="['type', `type${tableData.gdzt}`, 'left']">{{ type[tableData.gdzt] }}</span>
        </div>
        <div class="details-row">
          <!-- {{ tableData.szs }} -->
          <span>宿主：</span>
          <span>
            <span v-for="(item, index) in tableData.szs" :key="index" class="szs">
              <el-tooltip v-if="Number(item.SZLX) >= 0" class="item" placement="top-start" popper-class="atooltip">
                <div slot="content">{{ item.SZMC }}</div>
                <svg class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                  <!-- 0运维主机 1卡口 2电警 -->
                  <use :xlink:href="`#el-icon-mysuzhu_${item.SZLX}`" style="font-size: 50px" />
                </svg>
              </el-tooltip>
              <svg v-else class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                <!-- 0运维主机 1卡口 2电警 -->
                <use :xlink:href="`#el-icon-my${grayIcon[index]}`" style="font-size: 50px" />
              </svg>
            </span>
          </span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="details-row">
          <span>问题类型：</span><span>{{ tableData.lbmcs }}/{{ tableData.lbmc }}</span>
        </div>
        <div class="details-row">
          <span>问题描述：</span><span>{{ tableData.describes }}</span>
        </div>
        <div class="details-row">
          <span>诊断时间：</span>
          <span>{{ tableData.jcsj | dateFormat }}</span>
        </div>
        <div :class="['details-row', tableData.status === 0 ? 'f_039D12' : 'f_F56C6C']">
          <span>诊断结果：</span>
          <!-- 录像状态(0正常 1异常) -->
          <span :class="[`color_${tableData.status}`]">{{ tableData.status === 0 ? '正常' : '异常' }}</span>
        </div>
        <div class="details-row">
          <span class="details-img">图片：</span>
          <el-image style="width: 45px; height: 45px" :src="tableData.path" :preview-src-list="[tableData.path]" @click="handleClickItem">
            <div slot="error">
              <img style="width: 100%" :src="tableData.path" alt />
            </div>
          </el-image>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getImages } from '@/assets/js/getImage.js'
export default {
  props: ['detailsDate'],
  watch: {
    detailsDate: {
      deep: true,
      handler(newVal, oldVal) {
        this.tableData = getImages(newVal, 'path')
      },
    },
  },
  data() {
    return {
      type: ['未生成', '已受理', '待确认', '正常关闭', '驳回', '挂起', '外派'], // 正常和异常关闭不需要
      timeList: {},
      grayIcon: ['zhuji_hui', 'kakou_hui', 'dzjc_hui'],
      tableData: [],
    }
  },
  created() {
    this.tableData = getImages(this.detailsDate, 'path')
    console.log('--------', this.detailsDate)
    // this.getJc(this.detailsDate.jsonstr)
  },
  methods: {
    // 点击蒙版关闭图片
    handleClickItem() {
      this.$nextTick(() => {
        const domImageMask = document.querySelector('.el-image-viewer__mask') // 获取遮罩层dom
        if (!domImageMask) {
          return
        }
        domImageMask.addEventListener('click', () => {
          // 点击遮罩层时调用关闭按钮的 click 事件
          document.querySelector('.el-image-viewer__close').click()
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/xjzxCommon.scss';
@import '@/assets/scss/detailsRow.scss';
$c7A7A7A: #7a7a7a;
$c333333: #333333;
$c039D12: #039d12;
$cF56C6C: #f56c6c;
$cE4E7ED: #e4e7ed;
$c1989FA: #1989fa;
$c37CA41: #37ca41;
$cF96159: #f96159;

.f_039D12 {
  color: $c039D12 !important;
}
.f_F56C6C {
  color: $cF56C6C !important;
}
p.times {
  padding: 15px 0;
  font-size: 14px;
  font-weight: 400;
  > span {
    font-size: 14px;
    font-weight: 400;
    &.f_1989FA {
      color: $c1989FA;
      padding-right: 30px;
    }
    &.f_F56C6C {
      color: $cF56C6C;
    }
  }
}
div.lendge {
  margin-bottom: 10px;
  span {
    display: inline-block;
    position: relative;
    padding-left: 24px;
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }
    &:first-child {
      &::before {
        background-color: $c37CA41;
      }
      margin-right: 30px;
    }
    &:last-child {
      &::before {
        background-color: $cF96159;
      }
    }
  }
}
.el-image {
  margin-left: 85px;
}
.color_0 {
  color: #039d12 !important;
}
.color_1 {
  color: #f56c6c !important;
}
</style>
